import axios from "axios";
import React, { useEffect, useState } from "react";
import Promisstion from "../../components/promission";
interface ListState {
  title: string;
  id: string;
  word: string;
}

const Index: React.FC = () => {
  const [list, setList] = useState<ListState[]>([]);
  const fetchData = async () => {
    const resp = await axios.get("/api/list");
    setList(resp.data.data);
  };

  useEffect(() => {
    fetchData();
  }, []);
  return (
    <div>
      首页
      <table border={1}>
        <tbody>
          {list.map((v) => {
            return (
              <tr key={v.id}>
                <td>{v.id}</td>
                <td>{v.title}</td>
                <td>{v.word}</td>
                <Promisstion roles={['admin']}>
                  <td>
                    <button>编辑</button>
                    <button>删除</button>
                  </td>
                </Promisstion>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default Index;
